<template>
  <v-touch class="wrapper" v-on:swipeleft="onSwipeLeft">
    <div class="left-top-title">
      <div class="left-line animated fadeIn"></div>
      <img class="animated fadeInLeft" src="static/home/title-en.png" alt="">
      <h1 class="animated fadeInLeft"><img src="static/home/title-zh.png" alt=""></h1>
    </div>
    <img class="background" src="static/home/background.png" alt="">
    <div class="bottom-menu animated slideInUp">
      <ul>
        <li @click="$router.push('/locationAdvantages')">
          <img src="static/home/menu1.png" alt="">
        </li>
        <li @click="$router.push('/functionLayout')">
          <img src="static/home/menu2.png" alt="">
        </li>
        <li @click="$router.push('/interiorOfTheBuilding')">
          <img src="static/home/menu3.png" alt="">
        </li>
        <li @click="$router.push('/')">
          <img src="static/home/menu4.png" alt="">
        </li>
        <li @click="$router.push('/')">
          <img src="static/home/menu5.png" alt="">
        </li>
        <li @click="$router.push('/')">
          <img src="static/home/menu6.png" alt="">
        </li>
      </ul>
    </div>
  </v-touch>
</template>

<script>
export default {
  methods: {
    onSwipeLeft() {
      this.$router.push('/locationAdvantages');
    },
  },
};
</script>

<style lang="stylus" scoped>
.bottom-menu
  position: absolute;
  height: 90px;
  width: 100%;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  animation-duration 2s;
  ul
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
    li
      margin-left: 50px;
      list-style: none;
      font-size: 14px;
      color: #fff;
      &:first-child
        margin-left: 0px;
</style>
